<!DOCTYPE html>
<html>
<head>
<title>Energy Level Diagram</title>
<style>
  body { 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    height: 100vh; 
    margin: 0; 
    background-color: #f0f0f0; 
  }
  canvas { 
    background-color: white; 
    border: 1px solid #ccc;
  }
</style>
</head>
<body>
<canvas id="energyLevelCanvas" width="500" height="400"></canvas>
<script>
  const canvas = document.getElementById('energyLevelCanvas');
  const ctx = canvas.getContext('2d');

  // General Style
  ctx.strokeStyle = 'black';
  ctx.fillStyle = 'black';

  // --- Draw Outer Frame ---
  ctx.lineWidth = 2;
  ctx.strokeRect(25, 25, 450, 300);

  // --- Draw Energy Levels and Labels ---
  // The vertical spacing is proportional to the energy difference (E = hc/λ).
  // ΔE_AC / ΔE_AB = λ_B / λ_C = 500/250 = 2.
  // So, the vertical distance from A to C should be twice the distance from A to B.
  ctx.lineWidth = 3; 
  ctx.font = '24px serif';
  
  const lineX1 = 180;
  const lineX2 = 320;
  
  // Level A (highest energy)
  const yA = 90;
  ctx.beginPath();
  ctx.moveTo(lineX1, yA);
  ctx.lineTo(lineX2, yA);
  ctx.stroke();
  ctx.fillText('A', lineX2 + 20, yA + 8);

  // Level B (intermediate energy)
  const yB = 180; 
  ctx.beginPath();
  ctx.moveTo(lineX1, yB);
  ctx.lineTo(lineX2, yB);
  ctx.stroke();
  ctx.fillText('B', lineX2 + 20, yB + 8);

  // Level C (lowest energy)
  const yC = 270;
  ctx.beginPath();
  ctx.moveTo(lineX1, yC);
  ctx.lineTo(lineX2, yC);
  ctx.stroke();
  ctx.fillText('C', 240, yC + 8); 

  // --- Draw Transitions (Arrows) ---
  ctx.lineWidth = 1.5;

  function drawArrow(ctx, x1, y1, x2, y2) {
    ctx.beginPath();
    ctx.moveTo(x1, y1);
    ctx.lineTo(x2, y2);
    
    // Draw the arrowhead
    const headlen = 12;
    const angle = Math.atan2(y2 - y1, x2 - x1);
    const angleOffset = Math.PI / 8; // Controls the 'openness' of the arrowhead

    ctx.moveTo(x2, y2);
    ctx.lineTo(x2 - headlen * Math.cos(angle - angleOffset), y2 - headlen * Math.sin(angle - angleOffset));
    
    ctx.moveTo(x2, y2);
    ctx.lineTo(x2 - headlen * Math.cos(angle + angleOffset), y2 - headlen * Math.sin(angle + angleOffset));
    
    ctx.stroke();
  }

  // Arrow for transition A -> C
  drawArrow(ctx, 230, yA, 200, yC);

  // Arrow for transition A -> B
  drawArrow(ctx, 270, yA, 300, yB);

  // --- Draw Wavelength Labels ---
  // Label for λ_C = 250 nm
  ctx.font = '22px serif';
  ctx.fillText('λ', 50, 180);
  ctx.font = '16px serif';
  ctx.fillText('C', 63, 187);
  ctx.font = '22px serif';
  ctx.fillText('= 250 nm', 75, 180);

  // Label for λ_B = 500 nm
  ctx.font = '22px serif';
  ctx.fillText('λ', 340, 150);
  ctx.font = '16px serif';
  ctx.fillText('B', 353, 157);
  ctx.font = '22px serif';
  ctx.fillText('= 500 nm', 365, 150);

  // --- Draw Caption ---
  ctx.font = '20px serif';
  ctx.textAlign = 'center';
  ctx.fillText('Fig. 1.3', canvas.width / 2, 365);

</script>
</body>
</html>